<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Schedule-X Development</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: #1a202c;
      }

      .container {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        max-width: 600px;
        width: 100%;
        text-align: center;
      }

      .header {
        margin-bottom: 2.5rem;
      }

      h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .subtitle {
        color: #718096;
        font-size: 1.1rem;
        font-weight: 400;
      }

      .nav-grid {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;
      }

      .nav-item {
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.5rem;
        text-decoration: none;
        color: #2d3748;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 1.1rem;
      }

      .nav-item:hover {
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.2);
        color: #667eea;
      }

      .nav-item:active {
        transform: translateY(0);
      }

      .nav-icon {
        font-size: 1.5rem;
        margin-right: 1rem;
        width: 2rem;
        text-align: center;
      }

      .nav-text {
        flex: 1;
        text-align: left;
      }

      .nav-arrow {
        color: #cbd5e0;
        font-size: 1.2rem;
        transition: color 0.3s ease;
      }

      .nav-item:hover .nav-arrow {
        color: #667eea;
      }

      @media (max-width: 640px) {
        body {
          padding: 1rem;
        }
        
        .container {
          padding: 2rem;
        }
        
        h1 {
          font-size: 2rem;
        }
        
        .nav-item {
          padding: 1.25rem;
          font-size: 1rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>Schedule-X</h1>
        <p class="subtitle">Development Workbench</p>
        <br>
        <p class="subtitle">If you have not yet done so, take a minute to read through the <a target="_blank" href="https://github.com/schedule-x/schedule-x/blob/main/.github/contributing.md">contributing guide</a>.</p>
      </div>

      <nav class="nav-grid">
        <a href="/development/calendar/index.html" class="nav-item">
          <span class="nav-icon">🗓</span>
          <span class="nav-text">Calendar</span>
          <span class="nav-arrow">→</span>
        </a>

        <a href="/development/date-picker/index.html" class="nav-item">
          <span class="nav-icon">📅</span>
          <span class="nav-text">Date Picker</span>
          <span class="nav-arrow">→</span>
        </a>
        
        <a href="/development/time-picker/index.html" class="nav-item">
          <span class="nav-icon">🕰</span>
          <span class="nav-text">Time Picker</span>
          <span class="nav-arrow">→</span>
        </a>
        
        <a href="/development/theme-shadcn/index.html" class="nav-item">
          <span class="nav-icon">🎨</span>
          <span class="nav-text">Theme Shadcn</span>
          <span class="nav-arrow">→</span>
        </a>
      </nav>
    </div>
    <script type="module" src="/development/main.tsx"></script>
  </body>
</html>
